<template>
    <div class="comment-post">
      <van-field
        class="post-field"
        v-model.trim="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
      />
      <van-button
        class="post-btn"
        @click ='onPost'
        :disabled = "!message.length"
      >发布</van-button>
    </div>
  </template>

<script>
import { addComment } from '@/api/comment'
export default {
  name: 'CommentPost',
  components: {},
  inject: {
    articleId: {
      type: [Number, String, Object],
      default: null
    }
  },
  props: {
    targetId: {
      type: [Number, String, Object],
      required: true
    }
  },
  data () {
    return {
      message: ''
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    keyDown (value) {
      if (value.includes('\n')) {
        window.console.log(true)
      } else {
        window.console.log(false)
      }
    },
    async  onPost () {
      try {
        this.message = this.message.trim()
        if (!this.message) {
          return
        }
        this.$toast.loading({
          duration: 0, // 持续时间，0表示持续展示不停止
          forbidClick: true, // 是否禁止背景点击
          message: '评论发布中...' // 提示消息
        })
        const { data } = await addComment({
          target: this.targetId,
          content: this.message,
          art_id: this.articleId ? this.articleId.toString() : this.articleId
        })
        window.console.log(data)
        this.message = ''
        this.$emit('post-success', data.data)
        this.$toast.success('评论发布成功')
      } catch (err) {
        this.$toast.fail('发布失败')
        window.console.log(err)
      }
    }
  }
}
</script>

  <style scoped lang="less">
  .comment-post {
    display: flex;
    align-items: center;
    padding: 32px 0 32px 32px;
    .post-field {
      background-color: #f5f7f9;
    }
    .post-btn {
      width: 150px;
      border: none;
      padding: 0;
      color: #6ba3d8;
      &::before {
        display: none;
      }
    }
  }
  </style>
